<template>
	<div class='box'>
		<div class='header'>
			<img :src="details.cover.origin" alt=""/>
		</div>
		<div class="content">
			<div class="title">影片简介</div>
			<div class="xinxi">
				<div class="xq1">导&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;演 : <span v-text='details.director'></span></div>
				<div class="xq2">主&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;演 :<span>
					{{details.actors[0].name}}&nbsp;|&nbsp;{{details.actors[1].name}}&nbsp;|&nbsp;{{details.actors[2].name}}&nbsp;|&nbsp;{{details.actors[3].name}}
				</span></div>
				<div class="xq3">地区语音 : <span>{{details.language}}</span></div>
				<div class="xq4">类&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型: <span>{{details.category}}</span></div>
				<div class="xq5">上映日期 :{{date}}</div>
				<div class="xq6">{{details.synopsis}}</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		data(){
			return{
				details:'',
				date:''
			}
		},
		mounted(){

			var that =this;
			var date =new Date().getTime();
			$.get('http://10.20.159.13:3000/details/?id='+this.$route.params.id+'&time='+date,function(res){
				that.details=res.data.film;
				var newTime = new Date(that.details.premiereAt);
				var yue = newTime.getMonth()+1;
				var ri = newTime.getDate();
				that.date= yue+'月' + ri + '日上映';
				that.$store.commit('alter',that.details.name)
			})
		}
	}
</script>

<style scoped>
	.box {
		margin-top:.5rem;
	}
	.header {
		height:2.11rem;
	}
	.header img {
		width:100%;
	}

	.box .content {

	}
	.box .content .title {
		border-left:solid .16rem rgb(228, 200, 156);margin:.16rem 0;
		text-indent: .05rem;
	}
	.box .content .xinxi {

	}
	.box .content .xinxi .xq1,.xq2,.xq3,.xq4,.xq5,.xq6 {
		padding-left:.2rem;margin-bottom:.1rem;color:rgb(51, 51, 51);
		font-size:.12rem;
	}
</style>